<template>
	<view class="orderList">
		<view class="toptitle">
			<span>订单列表</span>
			<image src="../../../static/img/arrow.png" mode="" @click="back"></image>
		</view>

		<!--顶部导航栏-->
		<view class="uni-tab-bar navWrap">
			<!-- <scroll-view scroll-x class="uni-swiper-tab" enable-flex="true"> -->
			<view class="flexBox">
				<block v-for="(tabBar, index) in tabBars" :key="index">
					<view class="swiper-tab-list" :class="{ active: tabIndex == index }" @tap="toggleTab(index)">
						{{ tabBar.name }}
						<view class="swiper-tab-line"></view>
					</view>
				</block>
			</view>
			<!-- </scroll-view> -->
		</view>
		<!--内容区-->
		<view class="uni-tab-bar contentWrap">
			<view class="list">
				<view class="item" v-for="(item, index) in contentList" :key="index">
					<!-- <view class="item" v-for="(item, index) in content" :key="index"> -->
					<view class="title">
						<span>下单时间: {{ item.createTime }}</span>
						<span v-text="item.statusText"></span>
					</view>
					<view class="productWrap">
						<view class="productItem">
							<view class="left">
								<view class="word">
									<span>{{ item.productName }}</span>
									
								</view>
							</view>
							<view class="right">
								<span class="amount">x 1</span>
							</view>
						</view>
					</view>

					<view class="title moneyList">
						<span>订单号: {{ item.id }}</span>
						<span class="money"><br> ¥{{ item.money }}元</span>
					</view>
					<view class="itemBottom">
						<view @click="goDetails(item.id)" class="button">查看详情</view>
						<view @click="goDetails(item.id)" v-if="item.status == 'init'" class="button">立即支付</view>
						<view @click="shippedConfirm(item.id)" v-if="item.status == 'shipped'" class="button">确认收货
						</view>
					</view>
				</view>

				<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
				<view class="uni-loadmore loadfinished" v-if="finished">- 没有更多内容了 -</view>


			</view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/api';
	import utils from '@/common/utils';
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		data() {
			return {
				title: '订单列表',
				tabIndex: 0, //选中标签栏的序列
				limit: 4,
				page: 0,
				productId: null,
				userId: null,
				loading: false,
				finished: false,
				loadMoreText: '加载中...',
				loadingText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				showLoadMore: false,
				contentList: [],
				tabBars: [{
						name: '全部',
						value: []
						// "cancel", "init", "paid", "grouped", "shipped", "finish", "refund"
					},
					{
						name: '待付款',
						value: ['init']
					},
					{
						name: '待成团',
						value: ['paid']
					},
					{
						name: '待发货',
						value: ['grouped']
					},
					{
						name: '待收货',
						value: ['shipped']
					},
					{
						name: '已完成',
						value: ['finish', 'refund']
					}
				],
				statusTexts: []
			};
		},
		components: {
			uniLoadMore
		},
		onLoad(e) {
			if (e.tabIndex) {
				this.tabIndex = e.tabIndex;
			}
			API.constantAll().then(res => {
				console.log(res, "9999")
				if (res.data && res.data.OrderStatus) {
					this.statusTexts = res.data.OrderStatus
				}

				this.getOrderList();
			})
		},
		onPullDownRefresh() {
			this.page = 0;
			this.getOrderList();
			this.finished = false;
		},
		onUnload() {
			// this.contentList = [];
			this.showLoadMore = false;
		},
		onReachBottom() {
			console.log(this.finished, 'onReachBottom  finished');
			if (!this.finished) {
				this.showLoadMore = true;
				setTimeout(() => {
					this.page++;
					this.getOrderList();
				}, 300);
			}
		},
		methods: {
			findStatusText(val) {
				for (let i = 0; i < this.statusTexts.length; i++) {
					if (this.statusTexts[i].value == val) {
						return this.statusTexts[i].text
					}
				}
				return null
			},
			async getOrderList() {
				uni.showLoading({
					title: '正在加载...'
				});
				this.loading = true;
				let json = await API.groupbuyOrderList({
					limit: this.limit,
					page: this.page,
					productId: this.productId,
					statuses: this.tabBars[this.tabIndex].value,
					userId: uni.getStorageSync('uid')
				});
				uni.hideLoading();
				if (this.page == 0) this.contentList = []
				if (json.code == 200) {
					this.tabBars[this.tabIndex].num = json.total;

					for (let i = 0; i < json.data.length; i++) {
						this.contentList.push({
							createTime: utils.timestampToFormatString(json.data[i].createTime),
							status: json.data[i].status,
							productName: json.data[i].productName,
							id: json.data[i].id,
							money: json.data[i].money / 100,
							statusText: this.findStatusText(json.data[i].status),
						});
					}
					uni.stopPullDownRefresh();
					// 加载状态结束
					this.loading = false;
					if (json.data.length < this.limit) {
						this.finished = true;
						this.showLoadMore = false;
					}
				}
			},
			back() {
				var pages = getCurrentPages(); // 当前页面
				var beforePage = pages[pages.length - 2]; // 前一个页面
				wx.navigateBack({
					success: function() {
						beforePage.onLoad(); // 执行前一个页面的onLoad方法
					}
				});
			},
			testClick() {
				console.log('testClick')
			},
			goDetails(id) {
				console.log(id, "查看详情")
				uni.navigateTo({
					url: '../my/orderListDetail?id=' + id
				});
				// this.$router.push({ name: 'orderListDetail', params: { id: id } });
			},
			shippedConfirm(id) {
				uni.showModal({
					title: '提示',
					content: '是否要确认收货？',
					success: (res) => {
						if (res.confirm) {
							API.groupbuyOrderFinish({
								targetId: id
							}).then(json => {
								uni.showToast({
									title: '已确认收货',
									duration: 500
								});
								this.page = 0
								this.getOrderList()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			toggleTab(index) {
				console.log(index, 'tabIndex');
				this.tabIndex = index;
				this.page = 0;
				this.finished = false;
				this.contentList = []
				this.getOrderList();
			},
			//滑动切换swiper
			tabChange(e) {
				console.log(e.detail, '0000');
				const tabIndex = e.detail.current;
				this.tabIndex = tabIndex;
			}
		}
	};
</script>
<style lang="less">
	page {
		background: white;
	}

	.orderList {
		min-height: 100vh;
		background: white;

		.toptitle {
			background: white;
			display: none;
			justify-content: center;
			align-content: center;
			height: 50px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			position: fixed;

			span {
				line-height: 50px;
			}

			image {
				width: 26px;
				height: 26px;
				position: absolute;
				left: 20px;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		}

		.navWrap {
			position: sticky;
			position: fixed;
			width: 100%;
			left: 0;
			right: 0;
			z-index: 1;
			height: 50px;
			box-sizing: border-box;

			.flexBox {
				padding: 24upx 0 0;
				height: 50px;
				// border: 1px solid red;
				box-sizing: border-box;
				overflow: hidden;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				width: 100%;
				border-bottom: 1upx solid #eeeeee;

				.swiper-tab-list {
					flex: 1;
					width: 16.6666%;
					font-size: 30upx;
					display: flex;
					flex-direction: column;
					text-align: center;
					color: #969696;
					height: 40px;

				}
			}

			.uni-swiper-tab {
				border-bottom: 1upx solid #eeeeee;
				display: flex;
			}

			.uni-tab-bar .active {
				color: rgb(5, 152, 252);
			}

			.active .swiper-tab-line {
				border-bottom: 4upx solid rgb(5, 152, 252);
				width: 50upx;
				margin: auto;
				border-top: 4upx solid rgb(5, 152, 252);
				border-radius: 20upx;
			}

		}

		.uni-tab-bar {
			background: white;
			width: 100%;
		}

		.contentWrap {
			min-height: calc(100vh - 50px);
			padding-top: 50px;

			// border: 1px solid red;
			.list {
				box-sizing: border-box;
				height: calc(100vh - 50px) !important;

				.item {

					// border: 1px solid red;
					.title {
						height: 50px;
						padding: 0 0.8rem;
						display: flex;
						align-items: center;
						justify-content: space-between;
						background: white;

						span {
							color: rgba(16, 16, 16, 1);
							font-size: 14px;
						}

						span:last-child {
							color: #37aafb;
						}
					}

					.productWrap {
						width: 100%;
						padding: 0.3rem 0.8rem;
						box-sizing: border-box;
						background: #f9f9f9;

						.productItem {
							// height: 64px;
							padding: 4px 0;
							width: 100%;
							box-sizing: border-box;
							// border-bottom: 1px solid #eee;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.left {
								display: flex;
								width: 80%;

								.imgWrap {
									width: 50px;
									height: 50px;
									margin-right: 10px;

									img {
										width: 50px;
										height: 50px;
									}
								}

								.word {
									width: 90%;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;

									.amount {
										margin-left: 10px;
									}
								}
							}

							.right {
								width: 20%;
								display: flex;
								font-size: 14px;
								justify-content: flex-end;
								align-items: center;
								color: #101010;
							}
						}

						.item:last-child {
							border: none;
							padding-bottom: 0;
						}
					}

					.moneyList {
						span:last-child {
							color: rgba(16, 16, 16, 1);
							font-size: 14px;
						}
					}

					.itemBottom {
						padding: 0 0.8rem;
						height: 50px;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						border-top: 1px solid #f2f2f2;
						border-bottom: 1px solid #f2f2f2;

						.button {
							padding: 0 10px;
							height: 27px;
							border-radius: 50px;
							font-size: 13px;
							line-height: 27px;
							border: 1px solid rgba(0, 0, 0, 0.2);
							color: #979797;
							margin-left: 10px;
						}
					}
				}


			}
		}


		.uni-loadmore {
			color: #CCCCCC;
			text-align: center;
			padding: 10px 0;
			justify-content: center;
			align-items: center;
			font-size: 14px;
		}

		.loadfinished {
			padding: 15upx 0;
			font-size: 14px;
			color: #CCCCCC;
			text-align: center;
			// background: #fafafa;
		}
	}
</style>
